<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>我的玩家</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		body{
			background-color: #F1F1F1;
		}
		input{
			border: none;
			outline: none;
		}
		.top-wrap{
			background-color: #D5D5D5;
			overflow: hidden;
			height: 3.6rem;
			box-sizing: border-box;
			padding: 0 0 0 1rem;
		}
		.inp-wrap{
			width: 80%;
			float: left;
			height: 2rem;
			border-radius: 2rem;
			background-color: #FFFFFF;
			margin-top: 0.8rem;
			position: relative;
		}
		.btn-search{
			width: 20%;
			float: right;
			height: 3.6rem;
			line-height: 3.6rem;
			text-align: center;
			color: #535353;
		}
		.inp-search{
			position: absolute;
			top: 50%;
			left: 2rem;
			transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			width: 80%;
		}
		.mine{
			box-sizing: border-box;
			padding: 0.8rem 1rem;
			overflow: hidden;
			margin-bottom: 10px;
			background-color: #FFFFFF;
		}
		.mine-left{
			float: left;
		}
		.mine-right{
			float: right;
			color: #D74B2D;
		}
		.con{
		}
		.mine-icon{
			float: left;
			height: 1rem;
			margin-right: 5px;
		}
		.tag{
			border: 1px solid #D9D9D9;
			border-radius: 10px;
			background-color: #FFFFFF;
			width: 90%;
			margin: 0 auto;
			padding: 10px 0;
			display: flex;
		}
		.portrait{
			flex: 0 0 20%;
			text-align: center;
			position: relative;
		}
		.portrait img{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
		}
		.detail{
			flex: 0 0 50%;
			font-size: 0.9rem;
		}
		.detail-li{
			margin: 10px 0;
		}
		.title{
			display: inline-block;
			width: 5rem;
		}
		.value{
			display: inline-block;
		}
		.red{
			color: #D42400;
		}
		.btn-wrap{
			width: 100%;
			flex: 0 0 30%;
			text-align: center;
		}
		.btn{
			margin: 6px 5px;
		}
		.btn img{
			width: 80%;
		}
	</style>
	<body>
		<div class="top-wrap">
<!-- 			<div class="inp-wrap">
				<input type="text" class="inp-search" id="inpSearch" placeholder="请输入关键字" />
			</div>
			<div class="btn-search" id="search">搜索</div> -->
		</div>
		<div class="mine">
			<img class="mine-icon" src="{{asset('/imgs/yinpiao.png')}}"/>
			<div class="mine-left">当前房间数</div>
			<div class="mine-right">{{$count}}</div>
		</div>
		<div class="con">
			@foreach($rooms as $room)
			<div class="tag" data-id="{{$room->id}}">
				<div class="portrait"><img src="{{asset('/imgs/time.gif')}}"/></div>
				<div class="detail">
					@if($room->user_name0)
						<div class="detail-li">
							<div class="title">玩家1:</div>
							<div class="value">{{base64_decode($room->user_name0)}}</div>
						</div>
					@endif
					@if($room->user_name1)
						<div class="detail-li">
							<div class="title">玩家2:</div>
							<div class="value">{{base64_decode($room->user_name1)}}</div>
						</div>
					@endif
					@if($room->user_name2)
						<div class="detail-li">
							<div class="title">玩家3:</div>
							<div class="value">{{base64_decode($room->user_name2)}}</div>
						</div>
					@endif
					@if($room->user_name3)
						<div class="detail-li">
							<div class="title">玩家4:</div>
							<div class="value">{{base64_decode($room->user_name3)}}</div>
						</div>
					@endif
				</div>
				<div class="btn-wrap">
					<div data-id="1" class="diss-room-btn"><img style="width:80px" src="{{asset('/imgs/btn_jsfj.png')}}"/></div>
				</div>
			</div>
			@endforeach
		</div>
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
	<script type="text/javascript">
		$('.diss-room-btn').click(function(){
			var that = $(this),
				room_id = that.parents('.tag').attr('data-id');
		    $.ajax({
		        type: "POST",
		        dataType: "json",
		        url: '/mobile/agent/rooms/diss_room',
		        data: {
		        	room_id: room_id,
		            _token: "{{ csrf_token() }}"
		        },
		        success: function (data) {
		        	if (data.flag) {
		        		that.parents('.tag').remove();
		        	} else {
		        		alert(data.msg);
		        	}
		        }
		    }); 
		});
	</script>
	</body>
</html>
